<template>
  <div ref="container" class="g6-container" v-bind="$attrs"></div>
  <!-- <button @click="handleChange">{{ isCreate ? "创建边" : "正常边" }}</button> -->
  <Tools @tool-change="handleToolChange"></Tools>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Graph, NodeEvent } from "@antv/g6";
import topologyImg from "@/assets/index/topology1.png";
import topologyImg2 from "@/assets/index/topology2.png";
import topologyImg3 from "@/assets/index/topology3.png";
import topologyImg4 from "@/assets/index/topology4.png";
import { getDevice, getDeviceDetail } from "@/api/facility";
import Tools from "./Tools.vue";
import { useDevice } from "../composables/useDevice";
// 设备逻辑
const { devices } = useDevice();
let graph = null;
const container = ref(null);
const isCreate = ref(false);
const emit = defineEmits(["itemClick"]);
const behaviors = ref(["zoom-canvas", "drag-canvas", "drag-element"]);
// 处理工具栏事件
const handleToolChange = (toolName) => {
  console.log(toolName)
  if (!graph) return;

  switch (toolName) {
    case "select":
      // 选择模式 - 恢复默认行为
      graph.setBehaviors(behaviors.value);
      break;

    case "line":
      return
      // 连线模式
      graph.setBehaviors([
        ...behaviors.value,
        {
          type: "create-edge",
          trigger: "click",
          style: {
            lineWidth: 2,
            stroke: "#1890ff",
          },
          shouldBegin: (e) => e.targetType === 'node',
        }
      ]);
      break;

    case "zoomin":
      // 放大
      const currentZoomIn = graph.getZoom();
      graph.zoomTo(currentZoomIn * 1.2);
      break;

    case "zoomout":
      // 缩小
      const currentZoomOut = graph.getZoom();
      graph.zoomTo(currentZoomOut * 0.8);
      break;
  }
};
//initGraph
const initGraph = () => {
  console.log(devices)
  const data = {
    nodes: devices.value.nodes,
    edges: devices.value.edges,
  };

  graph = new Graph({
    container: container.value,
    autoFit: "center",
    data,
    zoom: 0.8,
    behaviors: behaviors.value,
    node: {
      type: "html",
      style: {
        size: (d) => [d.data.width, d.data.height],
        dx: -0,
        dy: -60,
        innerHTML: (d) => {
          const {
            data: { img, label, deviceName },
          } = d;

          return `<div class="topology-item">
                        <img class="topology-img" src="${img}" />
                        <div class="topology-text">${label}</div>
                      </div>`;
        },
      },
    },
    edge: {
      type: "polyline",
      style: {
        lineWidth: 2,
        stroke: "#438BCC",
        router: {
          type: "orth",
        },
      },
    },
    layout: {
      type: "dagre",
    },
  });

  graph.render();
  // 监听节点点击事件
  graph.on(NodeEvent.CLICK, (evt) => {
    const { target } = evt; // 获取被点击节点的 ID
    console.log(`节点 ${target.id} 被点击了`);

    // 获取节点数据
    const nodeData = graph.getNodeData(target.id);
    console.log("节点数据:", nodeData);
    emit("itemClick", nodeData);
    // 修改节点状态
    // graph.setElementState(target.id, "selected");
  });
}
//获取设备列表
const list = ref([])
const getList = async () => {
  const res = await getDevice();
  list.value = res.data
  const nodes = res.data.map(item => {
    return {
      id: item.hostId,
      data: {
        label: item.hostName,
        ip: item.ip,
        width: 110,
        height: 100,
        img: topologyImg,
      },
    }
  })
  const edges = res.data.map(item => ({ id: item.hostId, source: item.hostName, target: '' }))
  // initGraph(nodes, edges)
}


//初始化
onMounted(() => {
  // getList()
  initGraph()

});
</script>

<style lang="scss">
.g6-container {
  width: 100%;
  height: 100%;
  user-select: none;

  .topology-item {
    text-align: center;

    .topology-img {
      width: 105px;
      height: 95px;
      pointer-events: none;
      user-select: none;
    }

    .topology-text {
      background: #105b9d;
      line-height: 20px;
      padding: 0 4px;
    }
  }
}
</style>